<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/password.css" />
    <style>
        .myOrder .goodmes {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .myOrder .goodmes .img {
            width: 60px;
            height: 60px;
            background: #d8d8d8;
            border-radius: 2px;
            overflow: hidden;
        }
        .myOrder .goodmes .img img {
            width: 100%;
        }
        .myOrder .goodmes .rightname {
            margin-left: 10px;
        }
        table button{
            width:100px;
            height:34px;
            background:rgba(52,152,219,1);
            border-radius:3px;
            color: #fff;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
            background-color: rgba(52,152,219,1);
            border-color: rgba(52,152,219,1);
        }
        .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            color: #fff;
            background-color: rgba(52,152,219,1);
        }
    </style>
</head>

<body>
    <div class="myOrder">
        <div class="password">
            <div class="row" style="margin:10px -20px;">
                <div class="col-xs-6 col-sm-4 shoko"><a class="message active">所有订单</a></div>
                <div class="col-xs-6 col-sm-4 shoko"><a class="message">待发货</a></div>
                <div class="col-xs-6 col-sm-4 shoko"><a class="message">待收货</a></div>
            </div>
            <div class="mesinp1">
                <div class="usermes">
                    <div class="table-responsive">
                        <table class="table table-hover" style="text-align:center;color:#000">
                            <tr class="active" style="background:#bbb;">
                                <td>订单号</td>
                                <td>商品信息</td>
                                <td>商品单价</td>
                                <td>商数量</td>
                                <td>小计</td>
                                <td>交易时间</td>
                                <td>状态</td>
                            </tr>
                            <tr>
                                <td>312564888945612365</td>
                                <td>
                                    <div class="goodmes">
                                        <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                        <div class="rightname">我是商品名称</div>
                                    </div>
                                </td>
                                <td style="color:#E31C1C;">￥300</td>
                                <td> 2</td>
                                <td style="color:#E31C1C;">￥600</td>
                                <td>2018-12-28 22:55:27</td>
                                <td>交易成功</td>
                            </tr>
                            <tr>
                                <td>312564888945612365</td>
                                <td>
                                    <div class="goodmes">
                                        <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                        <div class="rightname">我是商品名称</div>
                                    </div>
                                </td>
                                <td style="color:#E31C1C;">￥300</td>
                                <td> 2</td>
                                <td style="color:#E31C1C;">￥600</td>
                                <td>2018-12-28 22:55:27</td>
                                <td>等待商家发货</td>
                            </tr>
                            <tr>
                                <td>312564888945612365</td>
                                <td>
                                    <div class="goodmes">
                                        <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                        <div class="rightname">我是商品名称</div>
                                    </div>
                                </td>
                                <td style="color:#E31C1C;">￥300</td>
                                <td> 2</td>
                                <td style="color:#E31C1C;">￥600</td>
                                <td>2018-12-28 22:55:27</td>
                                <td><button id="sureTo">确认收货</button></td>
                            </tr>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" style="display: flex;justify-content: flex-end;margin-right: 50px;">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="mesinp2 hidden">
                <div class="usermes">
                    <div class="table-responsive">
                        <table class="table table-hover" style="text-align:center;color:#000">
                            <tr class="active" style="background:#bbb;">
                                <td>订单号</td>
                                <td>商品信息</td>
                                <td>商品单价</td>
                                <td>商数量</td>
                                <td>小计</td>
                                <td>交易时间</td>
                                <td>状态</td>
                            </tr>
                            <tr>
                                <td>312564888945612365</td>
                                <td>
                                    <div class="goodmes">
                                        <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                        <div class="rightname">我是商品名称</div>
                                    </div>
                                </td>
                                <td style="color:#E31C1C;">￥300</td>
                                <td> 2</td>
                                <td style="color:#E31C1C;">￥600</td>
                                <td>2018-12-28 22:55:27</td>
                                <td>等待商家发货</td>
                            </tr>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" style="display: flex;justify-content: flex-end;margin-right: 50px;">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                </div>
            </div>
            <div class="mesinp3 hidden">
                <div class="usermes">
                    <div class="table-responsive">
                        <table class="table table-hover" style="text-align:center;color:#000">
                            <tr class="active" style="background:#bbb;">
                                <td>订单号</td>
                                <td>商品信息</td>
                                <td>商品单价</td>
                                <td>商数量</td>
                                <td>小计</td>
                                <td>交易时间</td>
                                <td>状态</td>
                            </tr>
                            <tr>
                                <td>312564888945612365</td>
                                <td>
                                    <div class="goodmes">
                                        <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                        <div class="rightname">我是商品名称</div>
                                    </div>
                                </td>
                                <td style="color:#E31C1C;">￥300</td>
                                <td> 2</td>
                                <td style="color:#E31C1C;">￥600</td>
                                <td>2018-12-28 22:55:27</td>
                                <td><button id="sureTo">确认收货</button></td>
                            </tr>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" style="display: flex;justify-content: flex-end;margin-right: 50px;">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script>
        $(".message").each(function (index) {
            $(".message").eq(index).click(function () {
                $(".message").removeClass("active");
                $(this).addClass("active");
                if (index == 0) {
                    $('.mesinp1').removeClass("hidden");
                    $(".mesinp2").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 1) {
                    $('.mesinp2').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 2) {
                    $('.mesinp3').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp2").addClass("hidden");
                }
            });
        })
        $("#sureTo").click(function () {
            layer.open({
                    title: '温馨提示',
                    content: '请收到货后，再确认收货！否则您可能钱货两空！',
                    area: ['300px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //确定的回调
                    }
                });
        });
    </script>
</body>

</html>